<template>
  <div class="main" ref="main">
    <el-backtop :visibility-height="400" :bottom="70">
      <el-tooltip effect="dark" content="回到顶部" placement="left">
        <i class="el-icon-caret-top"></i>
      </el-tooltip>
    </el-backtop>
    <HeaderView :header-class="headerClass"/>
    <div class="top" :style="cssObj.topStyle">
      <div class="info">
        <div class="logo" :style="cssObj.logoStyle"></div>
        <div class="text">
          <h2>{{ website.profile1 }}</h2>
          <h2>{{ website.profile2 }}</h2>
        </div>
      </div>
    </div>
    <div class="list">
      <ArticlePage :article-list="articleList" :no-scroll="noScroll"/>
      <div class="user-info" :style="userInfoStyle">
        <div class="avatar">
          <div class="avatar-img">
            <img :src="baseImageUrl+website.qrCode" alt="">
          </div>
        </div>
        <div class="nickname">
          <h3>{{ website.nickname }}</h3>
        </div>
        <div class="total">
          <a href="/timeline" class="article">
            <div>文章</div>
            <div>{{ total.articleCount }}</div>
          </a>
          <a href="/category" class="category">
            <div>分类</div>
            <div>{{ total.categoryCount }}</div>
          </a>
        </div>
        <div class="share">
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
          <a href="javascript:;"></a>
        </div>
      </div>
    </div>
    <FooterView/>
  </div>
</template>

<script>
import HeaderView from '@/components/HeaderView.vue'
import ArticlePage from '@/components/ArticlePage.vue'
import FooterView from '@/components/FooterView.vue'

export default {
  name: 'IndexView',
  components: {
    HeaderView,
    ArticlePage,
    FooterView
  },
  data () {
    return {
      headerClass: 'absolute-class',
      scrollTop: 0,
      clientHeight: 0,
      website: {},
      bannerList: ['73f4f058-c104-4dbe-b03d-384438484ac1.jpg', 'a44164b5-5ed9-45c1-ab95-e1c6b9828fb7.jpg'],
      baseImageUrl: process.env.VUE_APP_API + 'img/',
      bannerIndex: 1,
      interval: '',
      articleList: [],
      noScroll: false,
      page: 1,
      userInfoStyle: {
        position: 'relative',
        top: 0,
        left: 0
      },
      total: {}
    }
  },
  computed: {
    cssObj () {
      return {
        topStyle: {
          background: `url(${this.baseImageUrl + this.bannerList[this.bannerIndex].bannerUrl}) no-repeat center/cover`
        },
        logoStyle: {
          background: `url(${this.baseImageUrl + this.website.logo}) no-repeat center/cover`
        }
      }
    }
  },
  methods: {
    getWebsite () {
      this.$http.get('api/website').then(data => {
        this.website = data.data
      })
    },
    getBanner () {
      this.$http.get('api/banner').then(data => {
        this.bannerList = data.data
      })
    },
    handlerScroll (e) {
      /* 获取滚动条高度 */
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      /* 判断滚动条滚动 */
      if (this.scrollTop >= this.clientHeight / 2) {
        this.headerClass = 'fixed-class'
      } else {
        this.headerClass = 'absolute-class'
      }
      /* 判断滚动加载文章 */
      if (this.$refs.main.scrollHeight - this.scrollTop === this.clientHeight) {
        if (this.noScroll) {
          e.preventDefault()
        } else {
          this.getArticleList()
        }
      }
      /* 控制用户信息 */
      /* 获取header组件的高度 */
      const headerHeight = document.querySelector('.header').clientHeight
      if (this.scrollTop >= this.clientHeight - headerHeight) {
        this.userInfoStyle.top = (this.scrollTop - this.clientHeight + headerHeight) + 'px'
      } else {
        this.userInfoStyle.top = 0
      }
    },
    setBannerIndex () {
      this.bannerIndex = Number.parseInt(Math.random() * (this.bannerList.length) + '')
    },
    getArticleList () {
      this.$http.get(`api/article/hot/${this.page}`).then(data => {
        if (data.data.current <= data.data.pages) {
          this.articleList.push(...data.data.records)
          this.page++
        } else {
          this.noScroll = true
        }
      })
    },
    getTotal () {
      this.$http.get('api/total').then(data => {
        this.total = data.data
      })
    }
  },
  created () {
    this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    this.$nextTick(() => {
      this.getWebsite()
      this.getBanner()
      this.setBannerIndex()
      this.getArticleList()
      this.getTotal()
    })
  },
  mounted () {
    this.interval = setInterval(() => {
      this.setBannerIndex()
    }, 1000 * 60)
    window.addEventListener('scroll', this.handlerScroll, true)
  },
  destroyed () {
    clearInterval(this.interval)
    window.removeEventListener('scroll', this.handlerScroll)
  }
}
</script>

<style scoped lang="scss">
.main {
  background-color: whitesmoke;

  .top {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .info {
      display: flex;

      .logo {
        height: 150px;
        width: 150px;
        border-radius: 50%;
      }

      .text {
        color: white;
        text-align: center;
        margin-left: 20px;
        height: 100px;

        h2 {
          margin: 30px auto;
        }
      }
    }
  }

  .list {
    width: 1080px;
    margin: 20px auto 0;
    background-color: white;
    display: flex;

    .user-info {
      width: 280px;
      height: 400px;
      margin: 10px;
      background-color: rgba(90, 100, 150, 0.08);
      box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);

      .avatar {
        height: 200px;
        width: 200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .avatar-img {
          height: 150px;
          width: 150px;

          img {
            height: 100%;
            width: 100%;
            border-radius: 50%;
          }
        }
      }

      .nickname {
        text-align: center;
      }

      .total {
        display: flex;

        a {
          display: flex;
          flex-direction: column;
          color: black;
          text-decoration: none;
          width: 50%;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          div {
            margin: 10px;
          }
        }
      }

      .share {
        height: 50px;
        width: 220px;
        margin: 15px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        a {
          display: block;
          width: 25px;
          height: 25px;
        }

        a:nth-child(1) {
          background: url("../assets/share/qq1.png") no-repeat center/cover;
        }

        a:nth-child(2) {
          background: url("../assets/share/wechat1.png") no-repeat center/cover;
        }

        a:nth-child(3) {
          background: url("../assets/share/weibo1.png") no-repeat center/cover;
        }

        a:nth-child(4) {
          background: url("../assets/share/zfb1.png") no-repeat center/cover;
        }

        a:nth-child(5) {
          background: url("../assets/share/github1.png") no-repeat center/cover;
        }

        a:nth-child(1):hover {
          background: url("../assets/share/qq2.png") no-repeat center/cover;
        }

        a:nth-child(2):hover {
          background: url("../assets/share/wechat2.png") no-repeat center/cover;
        }

        a:nth-child(3):hover {
          background: url("../assets/share/weibo2.png") no-repeat center/cover;
        }

        a:nth-child(4):hover {
          background: url("../assets/share/zfb2.png") no-repeat center/cover;
        }

        a:nth-child(5):hover {
          background: url("../assets/share/github2.png") no-repeat center/cover;
        }
      }
    }
  }
}
</style>
